【Day06】我現在就想要!一鍵輸入主題色即可切換Theme - CSS Variables + calc() + rgb()

15th鐵人賽

卡羅奇奇

2023-09-21 23:07:03

351 瀏覽

分享至

CSS Variables + calc() + rgb()

CSS Variables支援度:Can I Use
calc()支援度:Can I Use
rgb()支援度:Can I Use

昨天了解到color-contrast()如何使用，但因為瀏覽器支援度問題，目前只能在safari特定版本以上才有效，
但是PM~~不會體諒你~~需求說來就來。
在我們殷殷期盼的color-contrast支援度提高以前，
我們還可以怎麼根據背景顏色，自動判斷文字色彩呢?

可以利用`CSS Variables` + `calc()` + `rgb()`搭配`YIQ公式`!

YIQ是什麼?

YIQ是將RGB顏色模型轉換成Y(亮度)、I、Q(色度)的方法
YIQ的公式如下：
Y = 0.299R + 0.587G + 0.114B
I = 0.596R - 0.274G - 0.322B
Q = 0.211R - 0.523G + 0.312B
根據公式我們就可以算出目前的背景色彩亮度，進而判斷背景中的文字應該呈現黑色還是白色
更多介紹看這裡

作法如下:
監聽input並設定根元素--red、--green、--blue三個變數

const setRootProperties = ()=>{
      root.style.setProperty('--red',red.value);
      root.style.setProperty('--green',green.value);
      root.style.setProperty('--blue',blue.value); 
 }

CSS Variables設定，根據三原色變數產出背景顏色，文字顏色再根據YIQ公式產出，這樣就完成啦!

:root{
  --background-primary:rgb(var(--red),var(--green),var(--blue));
  /* 算出Y */
  --accessible-color:calc(
      (((var(--red) * 299 + var(--green) * 587 + var(--blue) * 114) / 1000) - 128) * -1000
  );
  --text-primary:rgb(var(--accessible-color),var(--accessible-color),var(--accessible-color));
}